<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <!--
    1.修饰符用于指定一个指令应该以特殊方式绑定
    2.v-on:submit.prevent 的.prevent 修饰符表示阻止表单提交的默认方式
  -->
  <div id="app">
    <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit()">
      妖怪名:<input type="text" v-model:value="monster.name"><br/><br/>
      <button type="submit">注册</button>
    </form>
    <p>服务器返回的数据{{count}}</p>
    <h1>修饰符扩展案例</h1>
    <!--只能点击一次，并触发-->
    <button v-on:click.once="onMySubmit()">点击一次</button>
    <!--按回车才触发-->
    <input type="text" v-on:keyup.enter="onMySubmit()">
    <!--按方向键↓才触发-->
    <input type="text" v-on:keyup.down="onMySubmit()">
    <!--过滤空格-->
    <input type="text" v-model.trim="count">
  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        monster:{ //属性可以动态生成

        },
        count:0
      },
      methods:{
        onMySubmit() {
          //"" undefined null 都是false
          if (this.monster.name) {
            console.log("提交表单", this.monster.name);
            //这里可以根据业务发出ajax请求
            //得到数据后再进行数据更新
            this.count = 66;
          } else {
            console.log("请输入名字")
          }
        }
      }
    })
  </script>
  </body>
</html>